<!--
 * @Description: 一周内漏水报警统计
 * @FilePath: \hk-computerRoom-Security\src\views\home\component\echat-leakage.vue
 * @Date: 2024-01-16 11:55:23
 * @LastEditTime: 2024-02-02 11:05:42
-->
<template>
	<div>
		<EchartsBox :title="'一周内漏水报警统计'">
			<template #content>
				<div ref="myChartRef" class="content-box" v-if="state.lastWeeksData.length && state.currentWeeksData.length"></div>
				<NoData class="content-box" v-else></NoData>
			</template>
		</EchartsBox>
	</div>
</template>
<script setup lang="ts" name="echat-leakage">
import { onMounted, ref, reactive, nextTick } from 'vue';
import EchartsBox from './echarts-box.vue';
import { useHomeApi } from '/@/api/home/index';
import * as echarts from 'echarts';

const myChartRef = ref();
let myChart: any = null; // echarts实例对象

onMounted(() => {
	getLeakageAlarm();
});

const state = reactive({
	lastWeeksData: [],
	currentWeeksData: [],
});

// 获取温度报警统计
const getLeakageAlarm = async () => {
	const data = await useHomeApi().queryAlarmPropertyHistoryByWeek({ type: 2 });
	if (data.code == 200) {
		state.currentWeeksData = data.data.thisWeek ? data.data.thisWeek : ['0', '0', '0', '0', '0', '0', '0'];
		state.lastWeeksData = data.data.lastWeek ? data.data.lastWeek : ['0', '0', '0', '0', '0', '0', '0'];
	}
	nextTick(() => {
		initCharts();
		watchEchart();
	});
};

// 变化尺寸
const watchEchart = () => {
	var ro = new ResizeObserver(() => {
		myChart.resize(); //监测到div尺寸变化后调用
	});
	ro.observe(myChartRef.value);
};

const initCharts = () => {
	let option = {
		tooltip: {
			trigger: 'axis',
			backgroundColor: 'rgba(72, 101, 161, 0.7)',
			borderWidth: 0,
			textStyle: {
				color: '#fff',
				fontSize: 14,
			},
			axisPointer: {
				type: 'shadow',
			},
		},
		legend: {
			show: true,
			icon: 'rect',
			data: ['本周', '上周'],
			itemWidth: 20,
			itemHeight: 8,
			// itemGap: 15,
			right: 5,
			top: 5,
			textStyle: {
				fontSize: 12,
				color: '#fff',
			},
		},
		angleAxis: {
			type: 'category',
			data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
			axisLine: {
				show: true,
				// 外圈的颜色
				lineStyle: {
					color: 'rgba(46, 88, 136, 1)',
				},
			},
			axisLabel: {
				color: '#fff',
			},
			splitLine: {
				show: false,
			},
			// min: 0,
			// max: 120,
			// interval: 25,
		},
		radiusAxis: {
			axisLine: {
				show: false,
			},
			axisLabel: {
				show: false,
			},
		},
		polar: {
			center: ['45%', '50%'], //上下距离
			radius: ['0%', '80%'], //大小
		},
		// tooltip: {
		// 	trigger: 'item',
		// 	formatter: function (params, ticket, callback) {
		// 		return params.name + ' : ' + _that.toolTipData[params.dataIndex] + ' (' + params.data + '%)';
		// 	},
		// },
		series: [
			{
				type: 'bar',
				// data: [2, 4, 6, 1, 3, 2, 1],
				data: state.lastWeeksData,
				coordinateSystem: 'polar',
				name: '上周',
				stack: 'a',
				itemStyle: {
					color: 'rgba(0, 72, 129, 1)',
				},
			},
			{
				type: 'bar',
				// data: [10, 20, 30, 49, 34, 52, 11],
				data: state.currentWeeksData,
				coordinateSystem: 'polar',
				name: '本周',
				stack: 'a',
				itemStyle: {
					color: 'rgba(0, 163, 222, 1)',
				},
			},
		],
	};

	myChart = echarts.init(myChartRef.value as HTMLDivElement);
	myChart.setOption(option, true);
};
</script>
<style lang="scss" scoped>
.content-box {
	width: 100%;
	height: 100%;

	:deep(.no-data) {
		width: 200px;
		height: 200px;
	}
}
</style>
